<template>
  <div class="playerbottom">
    <div class="progress">
      <span ref="runingtime">00:00</span>
      <div class="progress-bar" @click.stop="progressClick" ref="progressBar">
        <div class="progress-line" ref="progressLine">
          <div class="progress-dot"></div>
        </div>
      </div>
      <span ref="totalTime">00:00</span>
    </div>
    <div class="controll">
      <div class="mode" @click.stop="mode" ref="mode"></div>
      <div class="pre" @click.stop="preSong"></div>
      <div class="play" @click.stop="play" ref="play"></div>
      <div class="next"  @click.stop="nextSong"></div>
      <div class="favorite" @click.stop="setFavorite" :class="{active: isFavorite(currentSong)}"></div>
    </div>
  </div>
</template>

<script>
import { formartTime } from '../../tools/tools'
import modeType from '../../store/modeType'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'PlayerBottom',
  data () { return {} },
  mounted () {
    if (this.modeType === modeType.loop) {
      this.$refs.mode.classList.add('loop')
    }
    if (this.modeType === modeType.one) {
      this.$refs.mode.classList.add('one')
    }
    if (this.modeType === modeType.random) {
      this.$refs.mode.classList.add('random')
    }
  },
  props: {
    SongTime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    ...mapGetters([
      'isPlaying',
      'modeType',
      'getIndex',
      'currentSong',
      'getFavoriteList'
    ])
  },
  methods: {
    ...mapActions([
      'setPlaying',
      'setModeType',
      'setCurrentIndex',
      'setPlayingTime',
      'setFavoriteList'
    ]),
    play () {
      this.setPlaying(!this.isPlaying)
    },
    mode () {
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        this.setModeType(modeType.random)
      } else {
        this.setModeType(modeType.loop)
      }
    },
    preSong () {
      this.setCurrentIndex(this.getIndex - 1)
    },
    nextSong () {
      this.setCurrentIndex(this.getIndex + 1)
    },
    progressClick (el) {
      // 计算progress当前长度
      const normalLeft = this.$refs.progressBar.offsetLeft
      const eventLeft = el.pageX
      const line = eventLeft - normalLeft
      const val = line / this.$refs.progressBar.offsetWidth
      // 计算当前时间
      this.$refs.progressLine.style.width = val * 100 + '%'
      const curTime = this.SongTime * val
      this.setPlayingTime(curTime)
    },
    setFavorite () {
      this.setFavoriteList(this.currentSong)
    },
    isFavorite (song) {
      const result = this.getFavoriteList.find(function (value) {
        return value.id === song.id
      })
      return result !== undefined
    }
  },
  watch: {
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    modeType (newValue, oldValue) {
      window.localStorage.setItem('localModeType', JSON.stringify(newValue))
      if (newValue === modeType.loop) {
        this.$refs.mode.classList.remove('random')
        this.$refs.mode.classList.add('loop')
      } else if (newValue === modeType.one) {
        this.$refs.mode.classList.remove('loop')
        this.$refs.mode.classList.add('one')
      } else {
        this.$refs.mode.classList.remove('one')
        this.$refs.mode.classList.add('random')
      }
    },
    SongTime (newValue, oldValue) {
      // console.log(this.SongTime)
      const time = formartTime(this.SongTime)
      // console.log(time)
      this.$refs.totalTime.innerHTML = time.minite + ':' + time.second
    },
    currentTime (newValue, oldValue) {
      const time = formartTime(this.currentTime)
      this.$refs.runingtime.innerHTML = time.minite + ':' + time.second
      const val = newValue / this.SongTime * 100
      this.$refs.progressLine.style.width = val + '%'
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '../../assets/css/variable.scss';
  @import '../../assets/css/mixin.scss';
  .playerbottom{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    .progress{
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        @include font_size($font_samll);
        @include font_color();
      }
      .progress-bar{
        margin: 0 10px;
        height: 10px;
        width: 100%;
        background: #fff;
        .progress-line{
          width: 0%;
          position: relative;
          height: 10px;
          background: #ccc;
          .progress-dot{
            position: absolute;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            left: 100%;
            top: 0;
            transform: translate(-50%, -3px);
            background: #fff;
          }
        }
      }
    }
    .controll{
      width: 80%;
      margin: 0 auto;
      padding: 50px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div{
        width: 80px;
        height: 80px;
      }
      .mode{
        &.loop{
          @include bg_img('../../assets/images/loop');
        }
        &.one{
          @include bg_img('../../assets/images/one');
        }
        &.random{
          @include bg_img('../../assets/images/shuffle');
        }
      }
      .pre{
        @include bg_img('../../assets/images/prev');
      }
      .play{
        @include bg_img('../../assets/images/play');
        &.active{
          @include bg_img('../../assets/images/pause');
        }
      }
      .next{
        @include bg_img('../../assets/images/next');
      }
      .favorite{
        @include bg_img('../../assets/images/un_favorite');
        &.active{
          @include bg_img('../../assets/images/favorite');
        }
      }
    }
  }
</style>
